<template>
  <div>
    <el-row :gutter="10">
      <el-col class="lie" :span="4">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>答题卡</span>
            </div>
          </template>
          <div style="height: calc(100vh - 211px);">

          </div>
        </el-card>
      </el-col>
      <el-col  class="lie" :span="10">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>题目区域</span>
            </div>
          </template>
          <div style="height: calc(100vh - 211px);">

          </div>
        </el-card>
      </el-col>
      <el-col  class="lie" :span="10">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>作答区域</span>
            </div>
          </template>
          <div class="rong">

          </div>
          <template #footer>
            <div>
              <el-row justify="space-between">
                <el-col :span="8">
                  <span style="font-size: 12px"><el-icon style="color: #67C23A"><SuccessFilled /></el-icon> 自动保存 2023-12-12 12:12:12</span>
                </el-col>
                <el-col :span="8">
                  <el-button-group>
                    <el-button type="primary" icon="ArrowLeft">上一题</el-button>
                    <el-button type="primary">
                      下一题<el-icon class="el-icon--right"><ArrowRight /></el-icon>
                    </el-button>
                  </el-button-group>
                </el-col>

              </el-row>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Theory"
}
</script>

<style scoped>
  .lie{
    height: calc(100vh - 120px);
  }
  .rong{
    height: calc(100vh - 280px);
  }
</style>
